<template>
  <div class="login-page">
    <div class="login-container fr">
      <!--标题头-->
      <div class="title">
        <span>欢迎登录品牌网</span>
        <span>还没账号？</span>
        <router-link to="/login" class="go_register">马上登录</router-link>
      </div>
      <!--登录表单-->
      <div class="login-form">
        <ul class="option">
          <li class="active">手机号码注册</li>
        </ul>
        <!--登录名-->
        <input type="text" id="phone" v-model="form.phone" placeholder="手机号码">
        <div class="change">
          <!--密码-->
          <input type="password" id="password" v-model="form.password" placeholder="登录密码">
          <!--验证码-->
          <div class="vcode clearfix">
            <input type="text" id="code" placeholder="手机验证码" v-model="form.code" class="code-input">
            <img :src="code" width="120" height="44" class="fr" @click="refleshCode">
            <!--<input type="button" class="get-code check-code hidden fr" style="display: block" value="获取验证码">-->
          </div>
          <p class="code-error">{{error}}</p>
          <label class="read">
            <el-checkbox v-model="checked" data-status="checked"  @change="handleCheckChange">已经阅读并同意</el-checkbox>
            <a id="agreement" href="javascript:void(0)">《注册协议》</a>
          </label>
        </div>
        <el-button :class="['checked '?'do-event':'do-event disabled']" :disabled="disabled" @click="toRegister">立即注册</el-button>
      </div>
      <!--第三方登录-->
      <div class="otherlogin">
        <div class="forget">
          <span>忘记密码了，</span>
          <a href="">点击找回</a>
        </div>
        <p>——第三方登录——</p>
        <div class="loginicon">
          <a href=""><i class="iconfont icon-qq"></i></a>
          <a href=""><i class="iconfont icon-weixin"></i></a>
          <a href=""><i class="iconfont icon-weibo"></i></a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import {getCode} from '../../api/user'
export default {
  name: 'RegisterComponent',
  mounted () {
    this.init()
  },
  data () {
    return {
      code: '',
      requestUrl: '',
      form: {
        account: '',
        password: '',
        code: ''
      },
      error: '', // 错误消息
      checked: true, // 是否选中《注册协议》
      disabled: false// (立即注册)button是否禁用【默认：可用】
    }
  },
  methods: {
    ...mapActions([
      'handleLogin'
    ]),
    /**
       * 验证码刷新
       */
    refleshCode: function () {
      this.init()
    },
    /**
     * 提交注册
     */
    toRegister: function () {
      // let obj = this.form
      // this.handleLogin(obj).then(res => {
      //   this.$router.push({
      //     path: '/home/',
      //     name: 'Home'
      //   })
      // })
    },
    /**
     * 初始化
     * @returns {Promise<void>}
     */
    init: async function () {
      const promise = await getCode()
      console.log(promise)
      this.code = promise.codeImage
      this.requestUrl = promise.codeUrl
    },
    /**
     * 选中禁用状态切换
     */
    handleCheckChange: function () {
      if (!this.checked) {
        this.disabled = true
      } else {
        this.disabled = false
      }
    }
  }
}
</script>

<style scoped>

</style>
